<template>
  <el-dialog
    title="签章设置"
    :visible.sync="dialogVisible"
    width="500px"
    @close="handleClose"
  >
    <div class="edit-sign">
      <div class="sign-preview">
        <div class="preview-title">签章预览</div>
        <div class="preview-content">
          <!-- 公章预览 -->
          <div v-if="signInfo.signMethod === 1" class="seal-preview public-seal">
            <img :src="publicSealImgRef" alt="公章" />
          </div>
          
          <!-- 签字预览 -->
          <div v-if="signInfo.signMethod === 0" class="seal-preview qz-seal">
            <span>{{ signInfo.person?.name }}</span>
          </div>
          
          <!-- 私章预览 -->
          <div v-if="signInfo.signMethod === 3" class="seal-preview ones-seal">
            <img :src="onesSealImgRef" alt="私章" />
          </div>
          
          <!-- 财务章预览 -->
          <div v-if="signInfo.signMethod === 4" class="seal-preview cwz-seal">
            <img :src="cwzSealImgRef" alt="财务章" />
          </div>
        </div>
      </div>
      
      <el-form :model="form" label-width="100px" size="small">
        <!-- 显示签署落款 -->
        <el-form-item label="显示签署落款">
          <el-switch v-model="form.showSignature" />
        </el-form-item>
        
        <!-- 显示日期 -->
        <el-form-item label="显示日期">
          <el-switch v-model="form.showDate" />
        </el-form-item>
      </el-form>
    </div>
    
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { ref, defineComponent, reactive, watch } from 'vue'

// 公章图片
import publicSealImg from '../../assets/public-seal.svg'
// 私章图片
import onesSealImg from '../../assets/ones-seal.svg'
// 财务章图片
import cwzSealImg from '../../assets/cwz-seal.svg'

export default defineComponent({
  name: 'EditSign',
  
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    signInfo: {
      type: Object,
      default: () => ({})
    }
  },
  
  emits: ['update:visible', 'confirm'],
  
  setup(props, { emit }) {
    // 图片资源 - 需要在最前面定义，避免模板中使用时出现初始化错误
    const publicSealImgRef = ref(publicSealImg)
    const onesSealImgRef = ref(onesSealImg)
    const cwzSealImgRef = ref(cwzSealImg)
    
    // 对话框可见性
    const dialogVisible = ref(false)
    
    // 表单数据
    const form = reactive({
      showSignature: false,
      showDate: false
    })
    
    // 监听visible属性变化
    watch(
      () => props.visible,
      (val) => {
        dialogVisible.value = val
        if (val) {
          // 初始化表单数据
          form.showSignature = props.signInfo.showSignature || false
          form.showDate = props.signInfo.showDate || false
        }
      }
    )
    
    /**
     * 处理关闭对话框
     */
    const handleClose = () => {
      emit('update:visible', false)
    }
    
    /**
     * 处理确认
     */
    const handleConfirm = () => {
      emit('confirm', {
        ...props.signInfo,
        showSignature: form.showSignature,
        showDate: form.showDate
      })
      handleClose()
    }
    
    return {
      dialogVisible,
      form,
      publicSealImgRef,
      onesSealImgRef,
      cwzSealImgRef,
      handleClose,
      handleConfirm
    }
  }
})
</script>

<style lang="scss" scoped>
.edit-sign {
  .sign-preview {
    margin-bottom: 20px;
    
    .preview-title {
      font-weight: bold;
      margin-bottom: 10px;
    }
    
    .preview-content {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100px;
      border: 1px dashed #dcdfe6;
      border-radius: 4px;
      
      .seal-preview {
        &.public-seal,
        &.ones-seal,
        &.cwz-seal {
          width: 80px;
          height: 80px;
          
          img {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
        }
        
        &.qz-seal {
          width: 100px;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: bold;
          font-size: 16px;
        }
      }
    }
  }
}
</style>